<template>
  <div class="flex flex-wrap">
    <div v-for="(item,index) in electronicMaterialList" :key="index" class="rounded-4 border border-#eee border-solid country pt-16 pb-20 mb-12 text-center bg-[#f6f7f9]" @click="goSelectProvince(item,index)">
      <div v-if="item.sample || !item.template">
        <img class="w-30 h-30" :src="item.sample || defaultImg" alt="">
      </div>
      <div v-else-if="item.template">
        <img class="w-30  h-30" :src="defaultImg" alt="">
      </div>
      <p><span class="c-red relative top--1 text-16" v-if="item.is_required == 1">*</span> {{ item.material_name }}</p>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue'
import { RectRight } from '@nutui/icons-vue';
import { useRoute, useRouter } from 'vue-router'
import { defineEmits, defineExpose } from 'vue'
import { useUserStore } from '@/store/modules/user/index.js'
const emit = defineEmits(['goSelectVisa', 'update:selectedProvince'])
import { require } from '@/utils/common/common.js'
const defaultImg = new URL('@/assets/images/page-home.png', import.meta.url)
const router = useRouter()
defineProps({
  electronicMaterialList: {
    type: Array
  },
  selectedProvince: {
    type: [Number, String],
    default: '北京'
  }
})

let show = ref(false)
const open = () => {
  show.value = true
}
const goSelectProvince = (item, index) => {
  show.value = false
  emit('update:selectedProvince', item.value)
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.country {
  flex: 0 0 32%;
  margin-right: 2%;
  border: 2px solid transparent;
}
.country:nth-child(3n) {
  margin-right: 0;
}
</style>